﻿<!DOCTYPE html >
<html>
<head>
    <title></title>
    <style>
        html, body { margin: 0; padding: 0; border: 0; overflow: hidden; }
        body { background: seagreen url(/Content/Image/icons.jpg) no-repeat; }
        .icon-box { width: 32px; height: 32px; position: absolute; bottom: 10px; border: 1px solid #000; }
        .icon-box-18 { width: 18px; height: 18px; left: 5%; }
        .icon-box-32 { width: 32px; height: 32px; right: 5%; }
        .icon-bak { background: cadetblue url(/Content/Image/icons.jpg) no-repeat -150px 0px; }
    </style>
</head>
    <body>
       
        <table>
            <tr>
                <td>
                    背景图片:
                </td>
                <td>
                    <input type="text" id="bakurl" value="" />
                    <input type="button" id="preview" value="预览" />
                </td>
            </tr>
        </table>
        <div class="icon-box icon-box-18 icon-bak ">
        </div>
        <div class="icon-box icon-box-32 icon-bak ">
        </div>
        <script type="text/javascript" src="/Scripts/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#preview').click(function () {
                    var imgurl = $('#bakurl').val();
                    window.open(imgurl);
                });
            });

        </script>
    </body>
</html>
